<template>
  <view class="dropdown-box">
    <ve-dropdown ref="dropdownRef" titleSize="24" @close="onDropdownClose">
      <ve-dropdown-item v-model:value="queryParam.feeType" title="费用类型" :options="dropDownList.orderFeeTypeEnum" @change="onChange" />
      <ve-dropdown-item v-model:value="queryParam.costType" title="收支类型" :options="dropDownList.costTypeList" @change="onChange" />
      <ve-dropdown-item v-model:value="queryParam.feeStatus" title="结算状态" :options="dict.feeStatusEnum" @change="onChange" />
      <ve-dropdown-item v-model:value="queryParam.createNode" title="生成节点" :options="dict.feeCreateNodeEnum" @change="onChange" />
    </ve-dropdown>

    <view
      class="reset"
      :class="
        queryParam.feeType != null || queryParam.costType != null || queryParam.feeStatus != null || queryParam.createNode != null
          ? 'reset-text'
          : ''
      "
      @click="onReset"
    >
      <ve-line color="#DADBDD" direction="col" length="44" margin="0rpx 24rpx 0rpx 0rpx" />
      <text>重置</text>
    </view>
  </view>

  <view class="data-summary">
    <view class="data-summary-header">
      <view class="data-summary-title">数据汇总</view>
      <view class="data-summary-btns">
        <ve-button type="primary" v-if="showViewFreeDepositCodeButton" size="mini" @click="onClickViewFreeDepositCode">
          <template #icon>
            <ve-icon name="icon-code" width="32" height="32" />
          </template>
          查看免押码
        </ve-button>
        <ve-button type="primary" size="mini" @click="onClickExplain">功能及名词解释</ve-button>
      </view>
    </view>
    <view class="data-summary-body">
      <view class="data-summary-box">
        <view class="data-summary-item">
          <view class="text-base">费用总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.totalAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item">
          <view class="text-base">付款总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.payAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item">
          <view class="text-base">收款总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.receivedAmount }}</text>
            <text> 元</text>
          </view>
        </view>
      </view>
      <view class="data-summary-box" v-if="shortOrderDetails?.orderSource != 1">
        <view class="data-summary-item">
          <view class="text-base">OTA对账总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.statementTotalAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item">
          <view class="text-base">佣金</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.commissionAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
      </view>
      <view class="data-summary-box" v-if="totalDetailList.depositInfoList?.length > 0">
        <template v-for="(item, index) in totalDetailList.depositInfoList" :key="item.depositName">
          <view class="data-summary-item">
            <view class="text-base">{{ item.depositName }}</view>
            <view>
              <text class="blue-3072f6 font-600">{{ item.amount }}</text>
              <text> 元</text>
            </view>
            <ve-tag v-if="item.payTypeName" background="#F2F3F5" :title="item.payTypeName" />
          </view>
          <ve-line v-if="index < totalDetailList.depositInfoList?.length - 1" direction="col" color="#F4F4F4" />
        </template>
        <template v-if="totalDetailList.depositInfoList?.length < 3">
          <ve-line direction="col" color="#F4F4F4" />
          <view class="data-summary-item"> </view>
        </template>
      </view>
      <view class="data-summary-box" v-if="totalDetailList.statementInfoList?.length > 0">
        <template v-for="(item, index) in totalDetailList.statementInfoList" :key="item.feeStatusName">
          <view class="data-summary-item">
            <view class="text-base">{{ item.feeStatusName }}</view>
            <view>
              <text class="blue-3072f6 font-600">{{ item.totalAmount }}</text>
              <text> 元</text>
            </view>
            <view class="data-summary-cell">
              <text>收款 </text>
              <text class="cell-num"> {{ item.collectAmount }} 元</text>
            </view>
            <view class="data-summary-cell">
              <template v-if="item.feeStatus != 1">
                <text>付款 </text>
                <text class="cell-num"> {{ item.payAmount }} 元</text>
              </template>
            </view>
          </view>
          <ve-line v-if="index < totalDetailList.statementInfoList?.length - 1" direction="col" color="#F4F4F4" />
        </template>
      </view>
    </view>
  </view>

  <view class="detail-container">
    <ve-card type="blue" v-for="item in feeList" :key="item.id">
      <template #title>
        <view class="card-title-box">
          <view>{{ item.itemName || '-' }}</view>
          <view class="card-title-total">
            <text>总额：</text>
            <text class="blue-3072f6 font-600">{{ item.amount || 0 }} 元</text>
            <ve-tag v-if="item.feeStatusName" color="#f53f3f" background="#ffece8" plain :title="item.feeStatusName" />
          </view>
        </view>
      </template>
      <template #operator-left>
        <ve-button v-if="item.canModify" type="primary" size="mini" @click="() => clickAccountFee(item)"> 修改金额 </ve-button>
      </template>

      <ve-cell label="实结">
        <view class="custom-cell-body">
          {{ item.payAmount || 0 }} 元
          <!-- <view class="custom-cell-icon">
            <ve-icon v-if="isAmountEdit(item)" name="edit" size="32" @click="() => clickChangePayAmount(item)" />
          </view> -->
        </view>
      </ve-cell>
      <ve-cell label="未结">{{ item.waitPayAmount || 0 }} 元</ve-cell>
      <ve-cell label="生成节点">{{ item.createNodeName || '-' }}</ve-cell>
      <ve-cell label="结算人">{{ item.settlementUserName || '-' }}</ve-cell>
      <ve-cell label="结算时间">{{ item.settlementTime || '-' }}</ve-cell>
      <ve-cell label="费用备注">
        <view>
          <text @click="onClickRemark(item)">{{ checkTextLength(item.remark) }}</text>
          <text v-if="item.remark" class="view-btn" @click.stop="onClickRemark(item)">查看更多</text>
        </view>
      </ve-cell>

      <view class="tag-box">
        <ve-tag class="ve-tag" color="#3491fa" background="#e8f7ff" plain v-if="item.feeTypeName" :title="item.feeTypeName" />
        <ve-tag class="ve-tag" color="#ff7d00" background="#fff7e8" plain v-if="item.costTypeName" :title="item.costTypeName" />
        <template v-if="item.payTypeNameList?.length > 0">
          <ve-tag
            v-for="payType in item.payTypeNameList"
            :key="payType"
            class="ve-tag"
            color="#722ed1"
            background="#f5e8ff"
            plain
            :title="payType"
          />
        </template>
      </view>

      <template #footer>
        <view class="buttons">
          <ve-button
            type="plain"
            size="mini"
            status="gray"
            @click="feeRevokeConfirm(item)"
            v-if="
              usePermission('svmsapp:order:short-order.revokeConfirmFee') &&
              item.payAmount !== 0 &&
              item.waitBillAmount !== 0 &&
              item.billStatus != 9
            "
          >
            撤销结算
          </ve-button>
          <!-- <ve-button type="plain" size="mini" status="gray" @click="feeEdit(item)" v-if="item.canModify == 1"> 修改费用 </ve-button> -->
          <ve-button type="plain" size="mini" status="gray" style="margin-left: 16rpx" v-if="handleDelete(item)" @click="deleteFn(item)">
            删除
          </ve-button>
          <ve-button
            v-if="item.feeStatus != 90 && usePermission('svmsapp:order:short-order.addremark')"
            type="plain"
            size="mini"
            status="gray"
            style="margin-left: 16rpx"
            @click="addRemarkFn(item)"
          >
            添加费用备注
          </ve-button>
          <ve-button
            type="plain"
            status="gray"
            size="mini"
            style="margin-left: 16rpx"
            @click="onClickQRCode('order/short-order/detail/index_cancel', item)"
            v-if="item.feeStatus == 1 && item.confirmPayType != 4 && usePermission('svmsapp:order:short-order.qrcodeCancel')"
          >
            取消收款
          </ve-button>
          <ve-button
            type="primary"
            size="mini"
            style="margin-left: 16rpx"
            @click="onClickQRCode('order/short-order/detail/index', item)"
            v-if="item.feeStatus == 1 && item.confirmPayType != 4 && usePermission('svmsapp:order:short-order.qrcode')"
          >
            收款码
          </ve-button>
          <ve-button
            type="plain"
            size="mini"
            style="margin-left: 16rpx"
            @click="feeConfirm(item)"
            v-if="
              usePermission('svmsapp:order:short-order.confirmfee') &&
              [0, 3].includes(item.feeStatus) &&
              (item.feeType == 1 || (item.feeType == 2 && [1000, -100].includes(shortOrderDetails?.orderStatus)))
            "
          >
            结算
          </ve-button>
        </view>
      </template>
    </ve-card>
  </view>

  <ve-bottom-box>
    <ve-button type="primary" @click="next" style="width: 100%">批量结算</ve-button>
  </ve-bottom-box>
  <!-- 删除弹窗 -->
  <ve-modal title="提示" v-model="deleteVisible" okText="删除" :okLoading="deleteLoading" @confirm="onConfirmItem" @close="onCloseItem">
    <view class="modal-content">费项可能存在已结算或已对账金额，确认要删除费用吗？</view>
  </ve-modal>
  <!-- 撤销结算 -->
  <ve-modal
    title="提示"
    cancelText="取消"
    v-model="revokeConfirmModal.visible"
    @close="revokeConfirmModal.close"
    @confirm="revokeConfirmModal.confirm"
    :okLoading="revokeConfirmModal.okLoading"
  >
    <view class="revoke-modal-text-box">
      <view class="revoke-modal-text">{{ `未对账总额：${revokeConfirmModal.extraData.waitBillAmount || 0}元，确认撤销结算吗？` }}</view>
      <view class="revoke-modal-text" style="color: red">注：</view>
      <view class="revoke-modal-text" style="color: red">1.未对账的金额支持撤销结算，撤销后需重新结算</view>
      <view class="revoke-modal-text" style="color: red">2.支付方式为聚合支付的金额不支持撤销结算</view>
      <view class="revoke-modal-text" style="color: red">3.支付方式为押金抵扣且使用芝麻免押的不支持撤销结算</view>
    </view>
  </ve-modal>
  <!-- 修改总额金额弹框 -->
  <checkAccountModal ref="checkAccountRef" @getFeeDetail="initFn()" />
  <!-- 修改实结金额弹框 -->
  <changePayAmountModal ref="changePayAmountRef" @getFeeDetail="initFn()" />
</template>

<script setup lang="ts">
  import checkAccountModal from '../../components/check-account-modal.vue'
  import changePayAmountModal from '../../components/change-pay-amount-modal.vue'

  import {
    costScreenOrder,
    getShortOrdrFeeDetailAPI,
    getStatisticsData,
    orderFeeDelete,
    getShortOrdrDetailsAPI,
    rejectShortOrderBill,
  } from '@/api/order/sOrder'
  import { usePageDict } from '@/hooks/useDict'
  import { usePermission } from '@/hooks/usePermission'

  import { ref, reactive, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { userStore } from '@/stores'
  const userInfoStore = userStore()
  // 企业信息
  userInfoStore.setEpDetail(false)

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })

  // 获取订单详情
  const shortOrderDetails = ref<any>({})
  const getShortOrderDetail = async () => {
    const res = await getShortOrdrDetailsAPI({ id: props.orderId })
    const result: any = res.result
    shortOrderDetails.value = result.orderInfo
  }

  // 是否显示查看免押码按钮
  const showViewFreeDepositCodeButton = computed(() => {
    // 芝麻免押服务开启
    let epAlipaySwitch = userInfoStore.epAlipaySwitch
    // 订单为线下订单
    let isOffLineOrder = shortOrderDetails.value.orderSource == 1
    // 存在押金id
    let isDepositId = totalDetailList.value.depositOrderId
    return epAlipaySwitch && isOffLineOrder && isDepositId
  })

  const dict = usePageDict('shortOrderDict')

  const feeList = ref<any[]>([])
  const routerQuery = ref()

  const queryParam = reactive({
    feeType: null,
    costType: null,
    feeStatus: null,
    createNode: null,
  })

  const checkTextLength = (text: string) => {
    if (text && text.length > 25) {
      return text.substring(0, 25) + '...'
    }
    return text ?? '-' + ' '
  }

  // 数据汇总
  const totalDetailList = ref<any>({})
  const getStatistics = () => {
    getStatisticsData({ orderId: props.orderId }).then((res: any) => {
      const { result } = res
      totalDetailList.value = result
    })
  }

  // 查看免押码
  const onClickViewFreeDepositCode = () => {
    uni.navigateTo({
      url: `/pages/order/short-order/free-deposit-code?orderId=${props.orderId}`,
    })
  }

  const onClickExplain = () => {
    uni.navigateTo({
      url: '/pages/order/short-order/detail/func-explain',
    })
  }

  // 配置金额限制
  const getAmountLimit = (record: any) => {
    const limit = {
      min: 0.01,
      max: 99999999.99,
    }
    // 当前生效的结算单数量
    const settlementCount = record.settlementCount
    // 当前已对账金额
    const billedAmount = record.billedAmount
    // 实结金额
    const payAmount = record.payAmount
    // 当前生效的结算单数量 = 0，说明没有结算和对账，无限制
    // 当前生效的结算单数量 > 1，最小是实结金额，最大不限制
    // 当前生效的结算单数量 = 1，如果 billedAmount > 0，最小是实结金额，billedAmount == 0 的话，无限制
    if (settlementCount > 1) {
      limit.min = payAmount
    }
    if (settlementCount == 1) {
      if (billedAmount > 0) {
        limit.min = payAmount
      }
    }
    return limit
  }

  const getDetail = (id: any) => {
    getShortOrdrFeeDetailAPI({ orderId: id, ...queryParam }).then((res: any) => {
      const result = res.result || []
      feeList.value = result.map((item: any) => {
        return {
          ...item,
          amountLimit: getAmountLimit(item),
        }
      })
    })
  }

  const initFn = () => {
    getDetail(props.orderId)
    getStatistics()
  }

  const dropdownRef = ref()
  const indexList = ref<number[]>([])

  // 获取当前筛选条件是否有值
  const getScreenValue = (index: number) => {
    switch (index) {
      case 0:
        return queryParam.feeType != null
      case 1:
        return queryParam.costType != null
      case 2:
        return queryParam.feeStatus != null
      case 3:
        return queryParam.createNode != null
      default:
        break
    }
  }

  const onDropdownClose = (index: number) => {
    if (index != 99999 && getScreenValue(index)) {
      if (!indexList.value.includes(index)) {
        indexList.value.push(index)
      }

      dropdownRef.value.highlight(indexList.value)
    }
  }

  const dropDownList = reactive({
    costTypeList: [],
    orderFeeTypeEnum: [],
  })

  // 获取筛选条件
  const getScreen = () => {
    costScreenOrder({}).then((res: any) => {
      const { result } = res

      for (const key in result) {
        if (Object.prototype.hasOwnProperty.call(result, key)) {
          const element = result[key]
          element.map((item: any) => {
            item.label = item.name
          })
        }
      }
      dropDownList.orderFeeTypeEnum = result.orderFeeTypeEnum
      dropDownList.costTypeList = result.costTypeEnum
    })
  }

  const onChange = () => {
    getDetail(props.orderId)
  }

  const onReset = () => {
    if (queryParam.feeType == null && queryParam.costType == null && queryParam.feeStatus == null && queryParam.createNode == null) {
      return
    }

    queryParam.feeType = null
    queryParam.costType = null
    queryParam.feeStatus = null
    queryParam.createNode = null
    indexList.value = []
    dropdownRef.value.highlight([])
    getDetail(props.orderId)
  }

  // 合并确认
  const next = () => {
    // 如收支方式为系统配置时（网络平台代收、网络平台代付、小程序线上支付、押金抵扣、预授权），不允许合并确认   1, 2, 3, 4, 5
    uni.navigateTo({
      url: '/pages/order/short-order/detail/mergeSettlement?orderId=' + props.orderId,
    })
  }
  // 添加备注
  const addRemarkFn = (record: any) => {
    uni.navigateTo({ url: `/pages/order/short-order/add-remark?id=${record.id}&mode=费用名称,${record.itemName}&title=添加费用备注` })
  }
  // 删除费用
  const deleteVisible = ref(false)
  const deleteRecord = ref()
  const deleteLoading = ref(false)
  const deleteFn = (item: any) => {
    deleteRecord.value = item
    deleteVisible.value = true
  }
  const onConfirmItem = () => {
    deleteLoading.value = true
    orderFeeDelete({ id: deleteRecord.value.id })
      .then(() => {
        deleteVisible.value = false
        uni.showToast({
          title: '删除成功',
          icon: 'none',
        })
        uni.$emit('refreshData')
        getStatistics()
        getDetail(props.orderId)
      })
      .finally(() => {
        deleteLoading.value = false
      })
  }

  const onCloseItem = () => {
    deleteRecord.value = null
    deleteVisible.value = false
  }

  // 单个确认
  const feeConfirm = (record: any) => {
    uni.navigateTo({
      url: '/pages/order/short-order/detail/settlement?idList=' + JSON.stringify([record.id]) + '&pagefrom=expense',
    })
  }
  const revokeConfirmModal = reactive({
    visible: false,
    okLoading: false,
    extraData: {},
    close: () => {
      revokeConfirmModal.okLoading = false
    },
    confirm: () => {
      const extraData = revokeConfirmModal.extraData as any
      revokeConfirmModal.okLoading = true
      // operateType 1 单个撤销结算 2 批量撤销结算
      rejectShortOrderBill({ idList: [extraData.id], operateType: 1 })
        .then(() => {
          revokeConfirmModal.visible = false
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          uni.$emit('refreshData')
          getStatistics()
          getDetail(props.orderId)
        })
        .finally(() => {
          revokeConfirmModal.okLoading = false
        })
    },
  })
  // 撤销结算
  const feeRevokeConfirm = (item: any) => {
    revokeConfirmModal.visible = true
    revokeConfirmModal.extraData = item
  }

  const isAmountEdit = (record: any) => {
    // feeType 1 线下费用 2 线上费用
    // orderStatus 10 待排车 100 待用车 200 用车中 300 已还车 1000 已完成 -100 已取消
    // feeStatus 0 未结算 1 结算中 3 部分结算 2 已结算 9 无需结算
    // billStatus 1 待对账 2 部分对账 3 已对账 9 关闭对账

    // 线下费用
    if (record.feeType == 1) {
      return record.feeStatus == 0 || record.feeStatus == 3
    }

    // 线上费用
    if (record.feeType == 2) {
      return (
        (routerQuery.value.orderStatus == '1000' || routerQuery.value.orderStatus == '-100') &&
        (record.feeStatus == 0 || record.feeStatus == 3) &&
        record.billStatus == 1 &&
        record.billedAmount == 0
      )
    }

    return false
  }

  // 修改费用
  const feeEdit = (record: any) => {
    if (record.feeCategory && (record.feeCategory == 4 || record.feeCategory == 41)) {
      uni.navigateTo({
        url: `/pages/asset/asset-fee/edit-fee?id=${record.id}&feeCategory=4&addorEdit=1&businesId=${record.id}&feeNameId=${record.feeNameId}`,
      })
    } else {
      uni.navigateTo({
        url: '/pages/order/short-order/edit-fees?id=' + record.id,
      })
    }
  }

  const onClickQRCode = (from: string, record: any) => {
    console.log('short onClickQRCode', record)

    uni.navigateTo({
      url: `/pages/common/components/qrcode?id=${record.id}&refId=${record.orderId}&bizType=1&from=${from}`,
    })
  }

  const onClickRemark = (data: any) => {
    uni.navigateTo({
      url: `/pages/order/short-order/detail/remark-list?id=${data.id}&orderId=${data.orderId}&title=费用备注`,
    })
  }

  // 修改对账金额
  const checkAccountRef = ref()
  // 修改对账金额弹框
  const clickAccountFee = (item: any) => {
    checkAccountRef.value.open(item)
  }

  // 修改实结弹框
  const changePayAmountRef = ref()
  const clickChangePayAmount = (item: any) => {
    changePayAmountRef.value.open(item)
  }

  const handleDelete = (item: any) => {
    // feeType 1 线下费用 2 线上费用
    // orderStatus 10 待排车 100 待用车 200 用车中 300 已还车 1000 已完成 -100 已取消
    // feeStatus 0 待结算 1 结算中 3 部分结算 2 已结算 9 无需结算
    // channelOrderMaintenance 1 自动维护 2 手动维护

    // 条件1：费用状态为待结算或无需结算
    if (usePermission('svmsapp:order:short-order.delete') && [0, 9].includes(item.feeStatus)) {
      // 条件2：费用类型为线下费用或线上费用的手动维护
      if (item.feeType == 1 || (item.feeType == 2 && shortOrderDetails.value.channelOrderMaintenance == 2)) {
        return true
      }
      // 条件3：费用类型为线上费用的自动维护，订单状态为已完成或已取消
      if (item.feeType == 2 && shortOrderDetails.value.channelOrderMaintenance == 1) {
        return [1000, -100].includes(shortOrderDetails.value.orderStatus)
      }
    }
  }

  onLoad((query) => {
    routerQuery.value = query
    getScreen()
    getShortOrderDetail()
  })

  onShow(() => {
    if (props.orderId) {
      initFn()
    }
  })
</script>

<style lang="scss" scoped>
  .view-btn {
    color: #3072f6;
    text-decoration: underline;
  }

  .dropdown-box {
    position: -webkit-sticky;
    position: sticky;
    // #ifdef APP-PLUS
    top: 0px;
    // #endif
    // #ifdef H5
    top: 44px;
    // #endif
    height: 80rpx;
    background-color: #fff;
    z-index: 1;

    :deep(.ve-dropdown) {
      padding: 0 12px;

      .ve-dropdown__menu__item {
        flex: none;
        justify-content: flex-start;
        margin-right: 15px;
      }
    }

    .reset {
      position: absolute;
      right: 12px;
      top: 0;
      bottom: 0;
      margin: auto;

      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 12px;
      color: #dadfe8;
      z-index: 12;
      image {
        width: 12px;
        height: 12px;
        margin-right: 5px;
      }
    }
    .reset-text {
      color: #3072f6;
    }
  }

  .blue-3072f6 {
    color: #3072f6;
  }

  .font-600 {
    font-weight: 600;
  }

  .text-base {
    font-size: 28rpx;
  }

  .data {
    &-summary {
      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 24rpx;

        .data-summary-title {
          font-weight: 600;
          font-size: 32rpx;
          color: #191c27;
        }
        .data-summary-btns {
          display: flex;
          .ve-button + .ve-button {
            margin-left: 32rpx;
          }
        }
      }

      &-body {
        display: flex;
        flex-direction: column;
        padding: 0 24rpx;

        .data-summary-box {
          display: flex;
          padding: 24rpx 24rpx;
          background-color: #fff;
          margin-bottom: 24rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .data-summary-item {
            width: 33.33333333333333%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .data-summary-cell {
              margin-top: 6px;
              font-size: 24rpx;
              color: #8491a8;

              .cell-num {
                color: #191c27;
              }
            }
          }
        }
      }
    }
  }

  .detail-container {
    padding: 24rpx 24rpx;

    .card {
      &-title {
        &-box {
          display: flex;
          flex-direction: column;
        }

        &-total {
          display: flex;
          align-items: center;

          text {
            margin-right: 16rpx;
          }
        }
      }
    }

    .tag-box {
      margin: 32rpx 0;
      .ve-tag {
        margin-right: 16rpx;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .buttons {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
    }
  }
  .modal-content {
    text-align: center;
    padding-bottom: 20px;
  }

  .custom-cell-body {
    display: flex;
    align-items: center;

    .custom-cell-icon {
      width: 22px;
      height: 22px;
      margin-left: 7px;
    }
  }
  .revoke-modal-text-box {
    padding: 16rpx 0 32rpx;
    .revoke-modal-text + .revoke-modal-text {
      margin-bottom: 6rpx;
    }
  }
</style>
